<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="快速微调" :visible.sync="dialogVisible" @close="resetForm()" width="962px">
        <div v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <el-table :data="tableData" class="com_table" height="400px">
                <el-table-column prop="old_material_name" label="素材源名称" min-width="180">
                </el-table-column>
                <el-table-column prop="new_material_name" label="素材目标名称" min-width="180">
                </el-table-column>
                <el-table-column prop="status" label="操作状态" width="150">
                    <template slot-scope="scope">
                        <div class="flexbox flexcenter" v-if="scope.row.status==0">
                            <div class="tm_y gray_y"></div>
                            <div class="tm_t gray_t">正在处理</div>
                        </div>
                        <div class="flexbox flexcenter" v-if="scope.row.status==1">
                            <div class="tm_y green_y"></div>
                            <div class="tm_t green_t">处理成功</div>
                        </div>
                        <div class="flexbox flexcenter" v-if="scope.row.status==-1">
                            <div class="tm_y red_y"></div>
                            <div class="tm_t red_t">处理失败</div>
                            <el-tooltip placement="top">
                                <div slot="content">
                                    {{scope.row.reason}}
                                </div>
                                <i class="el-icon-question red_t" style="margin-left:5px"></i>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="操作人名称" width="110">
                </el-table-column>
                <el-table-column prop="create_time" label="操作时间" width="180">
                </el-table-column>
            </el-table>
        </div>
        <el-pagination style="margin-top:16px" background layout="total, prev, pager, next" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :total="total">
        </el-pagination>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="resetForm()" class="el-button-width" size="small">关 闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            tableData: [],
            queryInfo: {
                page: 1,
                limit: 20,
            },
            total: 0,
        };
    },

    created() {},
    methods: {
        //获取列表
        async getTaskList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "/adminapi/material/microAdjustList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.total = res.data.count;
                this.tableData = res.data.list;
            }
        },

        // 关闭重置表单
        resetForm() {
            this.dialogVisible = false;
            this.queryInfo.page = 1;
            this.total = 0;
        },

        // 当前页切换
        handleCurrentChange(val) {
            this.queryInfo.page = val;
            this.getTaskList();
        },
    },
};
</script>
<style scoped>
.tm_y {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.tm_t {
    font-size: 14px;
    margin-left: 12px;
}
.gray_y {
    background: #b4b7bd;
}
.green_y {
    background: #00c271;
}
.red_y {
    background: #fe6262;
}
.gray_t {
    color: #b4b7bd;
}
.green_t {
    color: #00c271;
}
.red_t {
    color: #fe6262;
}
</style>

